<div id="wrapper" class="layout" name="common">
    <div class="container-fluid">
        <!-- top nav start -->
        <div class="row-fluid" id="topNavBar">
            <div class="navbar">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu-navbar-collapse">
                                <span class="sr-only">切换导航</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a href="#" class="navbar-brand brandTitle">
                                <div>
                                    <img src="platform/client/mainForm/navtabs/images/38x38-smartReport.png" />
                                    <span name="brandTitle">网站名</span>
                                </div>
                            </a>
                        </div>
                        <div class="collapse navbar-collapse" id="menu-navbar-collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li>
                                    <a name="username">
                                        <span class="span-normal-font">欢迎使用，</span>
                                        <span>XXX</span>
                                    </a>
                                </li>
                                <li class="divider-vertical">
                                </li>
                                <li>
                                    <a href="#" name="newButton">新建</a>
                                </li>
                                <li>
                                    <a href="#" name="fullScreen" id="fullScreen">全屏</a>
                                </li>
                                <li class="dropdown" name="dropdownMenuButton">
                                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">菜单
                                        <strong class="caret"></strong>
                                    </a>
                                    <ul class="dropdown-menu" name="menu">
                                        <!-- 下拉菜单 -->
                                    </ul>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">主题
                                        <b class="caret"></b>
                                    </a>
                                    <ul class="dropdown-menu" name="themeSelect">
                                        <!-- 主题下拉菜单 -->
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
        <div class="clearfix"></div>
        <!-- top nav end -->
        <div class="row-fluid">
            <div class="container-fluid" style="padding:0 10px;">
                <ul class="nav nav-tabs" name="tabsBar" id="tabsBar">
                    <!-- 标签页标签 -->
                </ul>
                <div name="content" id="content">
                    <!-- tab页的内容 -->
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script>
    $(function () {
        document.getElementById("fullScreen").onclick = enterFullScreen;

        document.onkeydown = function (ev) {
            var oEvent = ev || event; //获取事件对象(IE和其他浏览器不一样，这里要处理一下浏览器的兼容性event是IE；ev是chrome等)
            //Esc键的keyCode是27
            if (oEvent.keyCode == 27) {
                //阻止按键默认动作
                if (oEvent.preventDefault) {
                    oEvent.preventDefault();
                } else {
                    oEvent.returnValue = false;
                }
                exitFullScreen();
            }
        };

        function enterFullScreen() {
            var element = document.getElementById("content");
            var rfs = element.requestFullscreen || element.webkitRequestFullScreen ||
                element.mozRequestFullScreen || element.msRequestFullscreen;
            if (typeof rfs != "undefined" && rfs) {
                rfs.call(element);
            } else if (window.ActiveXObject) {
                var nav = document.getElementById("topNavBar");
                var tab = document.getElementById("tabsBar");
                $(nav).hide();
                $(tab).hide();
                //IE 10及以下ActiveXObject  
                var WsShell = new ActiveXObject('WScript.Shell')
                WsShell.SendKeys('{F11}');
            }
        }

        function exitFullScreen(isSendKey) {
            var el = document,
                cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
                el.mozCancelFullScreen || el.exitFullScreen || el.msExitFullscreen;
            if (typeof cfs != "undefined" && cfs) {
                cfs.call(el);
            } else if (window.ActiveXObject) {
                var nav = document.getElementById("topNavBar");
                var tab = document.getElementById("tabsBar");
                $(nav).show();
                $(tab).show();
                //IE 10及以下ActiveXObject  
                var WsShell = new ActiveXObject('WScript.Shell')
                WsShell.SendKeys('{F11}');
            }
        }

        function fullscreenchange() {
            var element = document.getElementById("content");
            if (document.webkitIsFullScreen || document.mozFullScreen || document.mozFullScreen || document.msFullscreenElement) {
                //全屏后要执行的代码
                $(element).css('background-color', $(document.body).css('background-color'));
            } else {
                //退出全屏后执行的代码
                $(element).css('background-color', 'rgba(0, 0, 0, 0)');　　
            }
        }

        if (document.addEventListener) {
            //监听不同浏览器的全屏事件，并件执行相应的代码
            document.addEventListener("webkitfullscreenchange", fullscreenchange, false);

            document.addEventListener("fullscreenchange", fullscreenchange, false);

            document.addEventListener("mozfullscreenchange", fullscreenchange, false);

            document.addEventListener("MSFullscreenChange", fullscreenchange, false);
        }

    });
</script>